<!DOCTYPE html>
<html>
<head>
    <title>Orange Gateway - WAF</title>
    {(meta.html)}
</head>
<body>

{(header.html)}<!-- header end -->

<div id="main" class="main-container container">
    <div class="row" style="margin-bottom:20px">
        <div class="col-md-12">
            <div class="pull-left">
                <h4>WAF防火墙</h4>
            </div>

            <div class="pull-right">
                <input id="rule-search" type="text" class="form-control" placeholder="  seach rules" style="width:150px;display: none;margin-right:10px;">
                <a id="view-btn" style="display:none;" data-type="table" class="btn btn-warning" rel="nofollow" href="javascript:void(0);">
                    <i class="fa fa-database"></i>
                    <span>数据视图</span>
                </a>
                <a id="switch-btn" style="display:none;" data-on="yes" class="btn btn-danger" rel="nofollow" href="javascript:void(0);">
                    <i class="fa fa-pause"></i>
                    <span>停用防火墙</span>
                </a>

                <a id="stat-btn" data-show="true" class="btn btn-success" rel="nofollow" href="javascript:void(0);">
                    <i class="fa fa-bar-chart"></i>
                    <span>统计</span>
                </a>
                
                <a class="btn btn-primary" href="javascript:void(0);" id="add-btn">
                    <i class="fa fa-filter"></i>
                    <span>添加新规则</span>
                </a>
            </div>

        </div>
    </div>

    <div class="row" id="stat-view" style="display: none;">
        <div class="col-md-12">
            <div style="height:400px;padding-top:20px;" id="stat-area"></div>

        </div>
    </div>

    <div class="row" id="table-view">
        <div class="col-md-12">
            <table  id="operable-table" class="table table-bordered  table-hover">
                <thead>
                <tr>
                    <th width="60px">序号</th>
                    <th width="40px">启用</th>
                    <th width="150px" >名称</th>
                    <th>匹配规则</th>
                    <th>动作</th>
                    <th width="120px">创建/变更时间</th>
                    <th width="100px">操作</th>
                </tr>
                </thead>

                <tbody id="rules" class="list">

                </tbody>
            </table>

        </div>
    </div>

    {(data-view-part.html)}
</div>

<script id="rule-item-tpl" type="text/template">
    {@each rules as r, index}
    <tr {@if highlight_id == r.id } class="highlight" {@/if} >
        <td class="center">${parseInt(index)+1}</td>
        <td class="center">
            {@if r.enable==true }
            <input type="checkbox" disabled checked="checked"/>
            {@/if}

            {@if r.enable!=true }
            <input type="checkbox" disabled/>
            {@/if}
        </td>
        <td class="center">${r.name}</td>
        <td class="left">
            <p>
                <b>Type</b>: ${r.judge.type}
                &nbsp;
                {@if r.judge.type==3 }
                    <b>Expression</b>: ${r.judge.expression}
                {@/if}
            </p>
            {@each r.judge.conditions as c, index}
            ${c.type}: ${c.name} ${c.operator} ${c.value}<br/>
            {@/each}
        </td>
        <td class="left handle">
            perform: ${r.handle.perform}<br/>
            {@if r.handle.perform=="deny" }
                code: ${r.handle.code}<br/>
            {@/if}
            log: ${r.handle.log}<br/>
            stat: ${r.handle.stat}
        </td>
        <td class="center">${r.time}</td>
        <td class="center do">
            <div class="btn-group" role="group" aria-label="...">
              <button type="button" class="btn btn-default edit-btn" data-id="${r.id}" data-name="${r.name}"><i title="编辑" class="fa fa-pencil"></i></button>
              <button type="button" class="btn btn-default delete-btn" data-id="${r.id}" data-name="${r.name}"><i title="删除" class="fa fa-trash"></i></button>
            </div>
        </td>
    </tr>
    {@/each}
</script>

<script id="add-tpl" type="application/template">
    <div id="rule-edit-area">
        <form id="add-rule-form" class="form-horizontal">
            <div class="form-group">
                <label for="input-name" class="col-sm-1 control-label">名称</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control" id="rule-name" placeholder="名称">
                </div>
            </div><!-- name -->

            <!-- add - 条件编辑器模板 start -->
            {(condition-add.html)}
            <!-- add - 条件编辑器模板 end -->

            <div class="form-group handle-holder">
                <label class="col-sm-1 control-label">执行</label>
                <div class="col-sm-3">
                    <select class="form-control" id="rule-handle-perform">
                        <option value="deny">deny</option>
                        <option value="allow">allow</option>
                    </select>
                </div>

                <div class="col-sm-2 handle-code-hodler">
                    <input type="text" class="form-control" id="rule-handle-code" value="403" placeholder="error code">
                </div>

                <div class="col-sm-2">
                    <select class="form-control" id="rule-handle-log">
                        <option value="true">Log</option>
                        <option value="false">Not Log</option>
                    </select>
                </div>

                <div class="col-sm-2">
                    <select class="form-control" id="rule-handle-stat">
                        <option value="true">Stat</option>
                        <option value="false">Not Stat</option>
                    </select>
                </div>
            </div><!-- handle -->



            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-11">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="rule-enable"> 启用
                        </label>
                    </div>
                </div>
            </div>

        </form>
    </div>
</script>

<script id="edit-tpl" type="application/template">
    <div id="rule-edit-area">
        <form id="edit-rule-form" class="form-horizontal">
            <div class="form-group">
                <label for="input-name" class="col-sm-1 control-label">名称</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control" id="rule-name" value="${r.name}" placeholder="名称">
                </div>
            </div><!-- name -->

            
            <!-- edit - 条件编辑器模板 start -->
            {(condition-edit.html)}
            <!-- edit - 条件编辑器模板 end -->


            <div class="form-group handle-holder">
                <label class="col-sm-1 control-label">执行</label>
                <div class="col-sm-3">
                    <select class="form-control" id="rule-handle-perform">
                        <option value="deny" {@if r.handle.perform=="deny"} selected {@/if}>deny</option>
                        <option value="allow" {@if r.handle.perform=="allow"} selected {@/if}>allow</option>
                    </select>
                </div>

                <div class="col-sm-2 handle-code-hodler" {@if r.handle.perform=="allow"} style="display:none;" {@/if} >
                    <input type="text" class="form-control" id="rule-handle-code" placeholder="error code" value="${r.handle.code}">
                </div>

                <div class="col-sm-2">
                    <select class="form-control" id="rule-handle-log">
                        <option value="true" {@if r.handle.log==true} selected {@/if}>Log</option>
                        <option value="false" {@if r.handle.log==false} selected {@/if}>Not Log</option>
                    </select>
                </div>

                <div class="col-sm-2">
                    <select class="form-control" id="rule-handle-stat">
                        <option value="true" {@if r.handle.stat==true} selected {@/if}>Stat</option>
                        <option value="false" {@if r.handle.stat==false} selected {@/if}>Not Stat</option>
                    </select>
                </div>
            </div><!-- handle -->



            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-11">
                    <div class="checkbox">
                        <label>
                            <input {@if r.enable==true} checked {@/if} type="checkbox" id="rule-enable"> 启用
                        </label>
                    </div>
                </div>
            </div>

        </form>
    </div>
</script>

<script src="/orange/static/js/waf.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        APP.Common.resetNav("nav-waf");
        APP.WAF.init();
    });
</script>

{(footer.html)}
</body>
</html>
